<template>
    <div>
      <el-date-picker
          time-arrow-control
          :id="'dp-step-5minute-id_'+randId"
          :popper-class="'dp-step-5minute dp-step-5minute-id_'+randId"
          v-model="value"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间">
      </el-date-picker>
      <el-date-picker
          time-arrow-control
          :id="'dp-step-5minute-id_'+randId1"
          :popper-class="'dp-step-5minute dp-step-5minute-id_'+randId1"
          v-model="value1"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间1">
      </el-date-picker>
  
      <br>
      <br>
      <el-button @click="alertPickerValue">获取数据</el-button>
    </div>
  </template>
  
  <script>
  import func_DatePicker from './set_dp-step-5minute'
  export default {
    name: 'demo',
    data() {
      return {
        value: "2021-07-30 12:45:45",
        value1: "2021-07-30 2:05:33",
        randId:new Date().getTime(),
        randId1:new Date().getTime() + 10
      };
    },
    destroyed() {
      // 注销事件
    },
    mounted(){
      const _this = this
      try {
        document.body.addEventListener('click', (e) => {
          func_DatePicker(e, function() {
            const timePicker = document.getElementById('dp-step-5minute-id_' + _this.randId)
            const timePicker1 = document.getElementById('dp-step-5minute-id_' + _this.randId1)
            _this.value = timePicker.value
            _this.value1 = timePicker1.value
          })
        }, true)
      } catch (e) {
        console.log(e)
      }
    },
    methods:{
      alertPickerValue(){
        alert(this.value)
        alert(this.value1)
      }
    }
  }
  </script>